<template>
  <div class="head">
    <div class="ul">
      <ul>
        <div class="img"><img src="@/assets/images/log.png" /></div>
        <li
          @click="litopage(index)"
          v-for="(item, index) in titles"
          :key="index"
          :class="{ z: index === isz }"
        >
          {{ item }}
        </li>
        <div class="input">
          <el-input
            v-model="input"
            :suffix-icon="Search"
            placeholder="搜索问题"
          ></el-input>
          <el-button
            @click="search"
            class="button"
            type="primary"
            roundclass="button"
            >提交</el-button
          >
          <div class="Message">
            <el-popover trigger="click" :width="310">
              <template #reference>
                <el-badge :value="MessagesNumber" :max="99" class="item">
                  <el-icon><Message /></el-icon>
                </el-badge>
              </template>
              <div><News /></div>
            </el-popover>
          </div>
          <div class="WindPower">
            <el-popover trigger="click" :width="360">
              <template #reference>
                <el-badge :value="CommentNumber" :max="99" class="item">
                  <el-icon><WindPower /></el-icon>
                </el-badge>
              </template>
              <div class="sx">
                <Privates />
              </div>
            </el-popover>
          </div>
          <div class="icon">
            <el-popover trigger="click" :width="120">
              <template #reference>
                <img
                  style="
                     {
                      width: 30px;
                      height: 30px;
                    }
                  "
                  src="../assets/images/log.png"
                />
              </template>
              <div class="sx">
                <Info />
              </div>
            </el-popover>
          </div>
        </div>
      </ul>
    </div>
  </div>
</template>

<script >
import { defineComponent, ref, unref, computed, reactive, toRaw } from "vue";
import { Search } from "@element-plus/icons-vue";
import router from "@/router";
import { useRoute } from "vue-router";
import { useStore } from "vuex";

import Privates from "./header-cpns/private.vue";
import Info from "./header-cpns/info.vue";
import News from "./header-cpns/news.vue";

import throttle from "@/utils/throttle";
import LocalCache from "@/utils/cache";

export default defineComponent({
  components: { Privates, Info, News },
  setup() {
    const routers = useRoute();
    console.log(routers.params.id, "0000");
    const titles = ["首页", "博主个人主页", "交友", "发现", "等你来答"];
    const input = ref("");
    const store = useStore();
    //放到 vuex里去
    const isz = computed(() => store.state.main.z);
    const cz = (e) => {
      store.commit("main/changez", e);
    };
    const Message = ref(0);
    const WindPower = ref(0);
    const litopage = (e) => {
      switch (e) {
        case 0:
          router.push("/main/0");
          cz(e);
          break;
        case 1:
          router.push("/study");
          cz(e);
          break;
        case 2:
          router.push("/pal");
          cz(e);
          break;
        case 3:
          router.push("/find");
          cz(e);
          break;
        case 4:
          router.push("/answer/0");
          cz(e);
      }
    };
    const search = () => {
      console.log(unref(input));
    };
    //观察界面移动距离来切换head
    const scrollTop = ref();
    const tm = ref(true);
    throttle(scrollTop, tm);

    // 发送网络请求 获得 用户私信消息
    const userid = LocalCache.getCache("id");
    store.dispatch("head/getwsmsg", userid);
    store.dispatch("head/getmsg", userid);

    const CommentNumber = computed(
      () => store.getters["head/getfriendmsgandprivatenmb"]
    );
    const MessagesNumber = computed(() => store.state.head.datalist.length);

    //获取文章
    //文章数据

    store.dispatch("main/getessay");

    return {
      titles,
      Search,
      input,
      search,
      litopage,
      isz,
      Message,
      WindPower,
      CommentNumber,
      MessagesNumber,
    };
  },
});
</script>

<style scoped lang="less" >
@w: 100%;
@w1: 100px;
.head {
  height: 52px;
  position: relative;
  color: #a8abb2;
  background-color: #ffffff;
  padding-top: 1px;
  border-bottom: 1px solid #a29e9e;
  position: sticky;
  top: 0;
  z-index: 99;
  margin-bottom: 15px;

  // box-shadow: 1px 1px 5px   #888888;
}
.img {
  position: relative;
  top: 0px;
  left: 0px;
  width: @w1;
  height: 30px;
  > img {
    width: @w;
    height: @w;
  }
}
.ul {
  width: 1200px;
  margin: auto;
  > ul {
    padding: 0;
    margin-top: 7px;
    margin-bottom: 0;
    list-style: none;
    display: flex;
    text-align: center;
    line-height: 30px;
    > li {
      position: relative;
      display: block;
      margin: 0 10px 0 10px;
      height: 30px;
      margin-left: 10px;
      cursor: pointer;
    }
    .input {
      display: flex;
      height: 30px;
      margin-left: 60px;
      /deep/ .el-input__wrapper {
        border-radius: 25px;
      }
      .button {
        margin-left: 10px;
        border-radius: 25px;
      }
      .Message {
        width: @w1;
        text-align: center;
        line-height: 40px;
        font-size: 15px;
        position: relative;
        margin-left: 50px;
        cursor: pointer;

        // 私信数量
        .Message-icon {
          position: absolute;
          width: 20px;
          height: 20px;
          border-radius: 20px;
          background-color: red;
          top: -4px;
          left: 30px;
          border: 2px solid rgb(255, 255, 255);
          line-height: 20px;
        }
      }
      .WindPower {
        width: @w1;
        text-align: center;
        line-height: 40px;
        font-size: 15px;
        position: relative;
        margin-left: 30px;
        cursor: pointer;
      }
      .icon {
        width: @w1;
        margin-left: 30px;
      }
    }
  }
}
.z {
  color: #000;
}
.z::after {
  position: absolute;
  top: 42px;
  left: 0px;
  content: "";
  height: 3px;
  width: 100%;
  background-color: #0066ff !important;
}
</style>
